import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import Avatar from '@/components/viewWidget/Avatar'
import {LikeOutlined, CommentOutlined, EyeOutlined} from '@ant-design/icons'
import './index.css'
import { Spin } from 'antd'

class BlogCard extends Component {

    constructor(props) {
        super(props)
        this.state = {
            loading: true,
            blog: null
        }
    }

    async componentDidMount() {
        const {blog} = this.props
        //处理过长的内容，保留300字符
        let newBlogText = blog.blogText
        if (blog && blog.blogText.length > 300) {
            newBlogText = newBlogText.substring(0, 300) + '...'
        }
        await new Promise((resolve) => {
            this.setState({
                blog: {
                    ...blog,
                    blogText: newBlogText
                }
            }, resolve)
        })

        if (blog) await new Promise((resolve) => {this.setState({loading: false}, resolve)})
    }

    render() {
        if (this.state.loading === true) return <Spin />
        const {blog} = this.state
        return (
            <div className='blog-card-main' style={this.props.style}>
                <div className='blog-title'>
                    <Link to={`/${blog.customerId}/blog/${blog.id}`}>{blog.blogTitle}</Link>
                </div>
                <div className='blog-content'>
                    <a className='blog-content-avatar' href={`/user/${blog.customerId}`}>
                        <Avatar
                            onClick={() => {return}}
                            src={blog.avatarUrl}
                            alt='avatar'
                            style={{ cursor: 'pointer', width: '70px', height: '70px', padding: '0.1em' }}
                        ></Avatar>
                    </a>
                    <p className='blog-content-text'>
                        {blog.blogText}
                    </p>
                </div>
                <div className='blog-footer'>
                    <div><Link to={`/user/${blog.customerId}`}>{blog.nickname}</Link></div>
                    <div>{blog.createTime}</div>
                    <div><Link to='/'><EyeOutlined /> {blog.views}</Link></div>
                    <div><Link to='/'><LikeOutlined /> {blog.agree}</Link></div>
                    <div><Link to='/'><CommentOutlined /> {blog.remarks}</Link></div>
                </div>
            </div>
        )
    }
}
export default BlogCard